<template>
  <a-modal
    v-model:visible="visible"
    :maskClosable="false"
    :title="'文件夹管理'"
    :width="1000"
  >
    <div class="own-folder">
      <div class="type">
        <div
          class="type-item"
          :class="{ active: type === 1 }"
          @click="getFolder(1)"
        >
          图库
        </div>
        <div
          class="type-item"
          :class="{ active: type === 2 }"
          @click="getFolder(2)"
        >
          视频库
        </div>
      </div>
      <div class="content">
        <a-button
          type="primary"
          v-acl="['resource:photo:folder']"
          @click="create"
        >
          添加文件夹</a-button
        >
        <div class="inner">
          <div class="folder" v-for="folder in folders" :key="folder.id">
            <a-popover title="操作" trigger="hover">
              <template #content>
                <!-- <p><edit-outlined />编辑</p> -->
                <a-button type="link" @click="edit(folder)">
                  <template #icon> <edit-outlined /> </template>编辑</a-button
                >
                <a-button type="link" danger @click="del(folder)"
                  ><template #icon> <delete-outlined /> </template
                  >删除</a-button
                >
              </template>
              <img src="@/assets/images/icon/folder2.png" />
              <span>{{ folder.folderName }}</span>
            </a-popover>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button @click="cancel" :loading="loading">取消</a-button>
      <a-button type="primary" :loading="loading" @click="submit()"
        >确定</a-button
      >
    </template>
    <own-folder-edit
      ref="folderEditForm"
      @submit="
        getFolder(type);
        needUpdate = true;
      "
    />
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { useStore } from "@/store";
import resourceApis from "@/apis/resource";
import { Modal } from "ant-design-vue";
import {
  FolderOutlined,
  FolderAddOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import OwnFolderEdit from "./own-folder-edit.vue";
export default defineComponent({
  name: "OwnFolder",
  components: {
    FolderOutlined,
    FolderAddOutlined,
    EditOutlined,
    DeleteOutlined,
    OwnFolderEdit,
  },
  setup(props, { emit }) {
    const store = useStore();
    const folderEditForm = ref(null);
    const state = reactive({
      visible: false as boolean,
      needUpdate: false as boolean,
      loading: false as boolean,
      type: 1 as Number,
      folders: [] as Array<any>,
    });
    const open = (type) => {
      state.visible = true;
      getFolder(type);
    };
    const submit = () => {
      cancel();
    };
    const cancel = () => {
      state.visible = false;
      if (state.needUpdate) {
        emit("submit");
      }
    };
    const getFolder = async (type) => {
      state.type = type;
      const res: any = await resourceApis.selectFolder({
        companyId: store.state.user.company.id,
        type: state.type,
      });
      if (res.code === 0) {
        state.folders = res.data;
      }
    };
    const create = () => {
      (folderEditForm as any).value.open("add", state.type);
    };
    const edit = (folder) => {
      (folderEditForm as any).value.open("edit", state.type, folder);
    };
    const del = (folder) => {
      Modal.confirm({
        title: "是否删除当前文件夹?",
        content: `删除后文件夹下的${state.type === 1?'图片':'视频'}也将一并被删除`,
        async onOk() {
          const res: any = await resourceApis.delFolder(folder.id);
          if (res.code === 0) {
            state.needUpdate = true;
            getFolder(state.type)
          }
        },
      });
    };
    return {
      open,
      submit,
      cancel,
      getFolder,
      create,
      edit,
      del,
      folderEditForm,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
.own-folder {
  display: flex;
  .type {
    padding-right: 24px;
    margin-right: 16px;
    border-right: 1px solid #f0f0f0;
    &-item {
      //   padding: 8px 32px;
      line-height: 35px;
      width: 150px;
      text-align: center;
      margin-bottom: 16px;
      cursor: pointer;
    }
    .active {
      color: #2288fe;
      font-weight: bold;
      border: 1px solid #2288fe;
      border-radius: 20px;
    }
  }
  .content {
    flex: 1;
    .inner {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;

      .folder {
        margin-bottom: 32px;
        text-align: center;
        cursor: pointer;
        width: 152px;
        img {
          display: block;
          margin: 0 auto 10px;
          width: 100px;
          color: #666;
        }
      }
    }
  }
}
</style>